<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Han's Blog - 我思故我在</title><meta name="author" content="憨憨一个"><meta name="copyright" content="憨憨一个"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="description" content="憨憨的博客，应该会有知识点记录，也会有日常">
<meta property="og:type" content="website">
<meta property="og:title" content="Han&#39;s Blog">
<meta property="og:url" content="http://blog.better2020.top/page/2/index.html">
<meta property="og:site_name" content="Han&#39;s Blog">
<meta property="og:description" content="憨憨的博客，应该会有知识点记录，也会有日常">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://blog.better2020.top/null">
<meta property="article:author" content="憨憨一个">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://blog.better2020.top/null"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://blog.better2020.top/page/2/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="preconnect" href="//zz.bdstatic.com"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css"><script>var GLOBAL_CONFIG = { 
  root: '/',
  hexoversion: '5.2.0',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  ClickShowText: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  justifiedGallery: {
    js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
    css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isanchor: false
};

var saveToLocal = {
  set: function setWithExpiry(key, value, ttl) {
    const now = new Date()
    const expiryDay = ttl * 86400000
    const item = {
      value: value,
      expiry: now.getTime() + expiryDay,
    }
    localStorage.setItem(key, JSON.stringify(item))
  },

  get: function getWithExpiry(key) {
    const itemStr = localStorage.getItem(key)

    if (!itemStr) {
      return undefined
    }
    const item = JSON.parse(itemStr)
    const now = new Date()

    if (now.getTime() > item.expiry) {
      localStorage.removeItem(key)
      return undefined
    }
    return item.value
  }
}</script><script id="config_change">var GLOBAL_CONFIG_SITE = { 
  isPost: false,
  isHome: true,
  isHighlightShrink: false,
  isSidebar: false,
  postUpdate: '2022-03-17 13:26:44'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(function () {
  window.activateDarkMode = function () {
    document.documentElement.setAttribute('data-theme', 'dark')
    if (document.querySelector('meta[name="theme-color"]') !== null) {
      document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
    }
  }
  window.activateLightMode = function () {
    document.documentElement.setAttribute('data-theme', 'light')
    if (document.querySelector('meta[name="theme-color"]') !== null) {
      document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
    }
  }

  const autoChangeMode = 'false'
  const t = saveToLocal.get('theme')
  if (autoChangeMode === '1') {
    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
    const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
    const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
    const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified

    if (t === undefined) {
      if (isLightMode) activateLightMode()
      else if (isDarkMode) activateDarkMode()
      else if (isNotSpecified || hasNoSupport) {
        const now = new Date()
        const hour = now.getHours()
        const isNight = hour <= 6 || hour >= 18
        isNight ? activateDarkMode() : activateLightMode()
      }
      window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
        if (saveToLocal.get('theme') === undefined) {
          e.matches ? activateDarkMode() : activateLightMode()
        }
      })
    } else if (t === 'light') activateLightMode()
    else activateDarkMode()
  } else if (autoChangeMode === '2') {
    const now = new Date()
    const hour = now.getHours()
    const isNight = hour <= 6 || hour >= 18
    if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
    else if (t === 'light') activateLightMode()
    else activateDarkMode()
  } else {
    if (t === 'dark') activateDarkMode()
    else if (t === 'light') activateLightMode()
  }
})()</script><meta name="generator" content="Hexo 5.2.0"><link rel="alternate" href="/atom.xml" title="Han's Blog" type="application/atom+xml">
</head><body><div id="mobile-sidebar"><div id="menu_mask"></div><div id="mobile-sidebar-menus"><div class="mobile_author_icon"><img class="avatar-img" src="/null" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="mobile_post_data"><div class="mobile_data_item is-center"><div class="mobile_data_link"><a href="/archives/"><div class="headline">文章</div><div class="length_num">25</div></a></div></div><div class="mobile_data_item is-center">      <div class="mobile_data_link"><a href="/tags/"><div class="headline">标签</div><div class="length_num">16</div></a></div></div><div class="mobile_data_item is-center">     <div class="mobile_data_link"><a href="/categories/"><div class="headline">分类</div><div class="length_num">2</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div></div></div></div><div id="body-wrap"><header class="full_page" id="page-header" style="background-image: url(https://w.wallhaven.cc/full/ox/wallhaven-oxkjgm.jpg)"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Han's Blog</a></span><span id="menus"><div id="search_button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div></div><span class="close" id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></span></span></nav><div id="site-info"><h1 id="site-title">Han's Blog</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/liujiaoy" target="_blank" title="Github"><i class="fab fa-github"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout_page" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/08/25/resume/" title="resume">     <img class="post_bg" src="/2021/08/25/resume/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="resume"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/08/25/resume/" title="resume">resume</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-25T00:13:07.000Z" title="发表于 2021-08-25 08:13:07">2021-08-25</time></span></div><div class="content">js数据类型7 大数据类型

Number (数字)
String (字符串)
Boolean (布尔)
Symbol (符号)
Object (对象)
function (函数)
Array (数组)
Date (日期)
RegExp (正则表达式)


Null (空)
Undefined (未定义)

五种基本数据类型 Number,Null,Undefined,Boolean,String一种复杂数据类型 Objectes6 新加入 symbol谈到ES6，就想到下面的问题了
null与undefined
undefined 已声明，未定义
null 空值

判断数据类型的方法一、typeof
优点：能够快速区分基本数据类型 
缺点：不能将Object、Array和Null区分，都返回object
注意！ typeof(null)//object 但typeof 可以检测function

三、Object.prototype.toString.call()12345678910var toString = Object.prototype.toString; console. ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/08/23/%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E6%B3%95/" title="解决跨域问题的几种方法">     <img class="post_bg" src="/2021/08/23/%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E6%B3%95/topimg.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="解决跨域问题的几种方法"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/08/23/%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E6%B3%95/" title="解决跨域问题的几种方法">解决跨域问题的几种方法</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-23T08:38:23.000Z" title="发表于 2021-08-23 16:38:23">2021-08-23</time></span></div><div class="content">前言昨天晚上刷面试视频看到这个问题了，解决跨域的几种方法，其实算个老问题了，不少文章都讲到过，看了好几篇，一直没动手记录，因为感觉没闹懂，直到昨天终于感觉有点悟了。赶紧来尝试记录一下，看自己能不能解释清楚。
JSONP这应该是最早的一种方式解决跨域，通过&lt;script&gt;标签来处理，原理就是利用script标签没有跨域的概念，就像我们通过cdn来引用在线js文件一样，不会有跨域问题。
方式12345678910111213141516//本质是这样，但这种只能写死的肯定不行&lt;script type=&quot;text/javascript&quot; src=&quot;../js/SheetOut/SheetOutPopUp.js?t=20210826&quot;&gt;&lt;/script&gt;//所以需要写成方法 &lt;script&gt;    var script = document.createElement(&#x27;script&#x27;);//创建script标签    script.type = &#x27;text/javascrip ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/08/17/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E8%AE%B0%E5%BD%95/" title="前端面试题记录">     <img class="post_bg" src="/2021/08/17/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E8%AE%B0%E5%BD%95/topimg.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="前端面试题记录"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/08/17/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E8%AE%B0%E5%BD%95/" title="前端面试题记录">前端面试题记录</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-17T01:40:55.000Z" title="发表于 2021-08-17 09:40:55">2021-08-17</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/code/">code</a></span></div><div class="content">发现刷面试题也是巩固知识的一个好方法，好记性不如烂笔头所有的代码例子还是要自己敲一遍，跑一边才能更理解。概念性的东西要多尝试讲给别人听，看自己能不能讲通。同时引申去思考一些东西，为什么问这些问题，在哪些场景能用上，自己可不可以去造一些例子……
CSS部分垂直居中高频问题基本所有前端开发者都会遇到，日常常见问题，算一个基础问题，然后还能引申到flex布局上，面试上也很好切换问题方向实现方式分几种
1. 基于定位12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;  &lt;meta charset=&quot;UTF-8&quot;&gt;  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;  &lt;m ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/08/04/vue%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80/" title="vue瀑布流布局">     <img class="post_bg" src="/2021/08/04/vue%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80/%E7%80%91%E5%B8%83%E6%B5%81.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vue瀑布流布局"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/08/04/vue%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80/" title="vue瀑布流布局">vue瀑布流布局</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-04T00:54:36.000Z" title="发表于 2021-08-04 08:54:36">2021-08-04</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/code/">code</a></span></div><div class="content">今天用vue实现瀑布流布局介绍一下瀑布流布局瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
做个小案例来理解：照片墙案例网址 http://travel.better2020.top/dist/#/profile思路分析瀑布流布局的特点是等宽不等高。为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。实现方式1.css3 column 可直接实现，缺点为图片竖向排列2.绝对定位，通过top和left值来确定元素的位置，假设3列 var arr = [height1,height2,height3]3.flex 弹性布局 每一行为一个容器，每次追加图片到最矮的容器即可2和3的方法很接近，这次我通过3来实现
开始1.确定列数    可以通过固定宽度，动态计算列数，也可以确定列数，动态决定宽度
2.获取数据
3.渲染至页面
123456789101112131 ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/06/09/%E6%97%A5%E5%B8%B81/" title="日常1">     <img class="post_bg" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="日常1"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/06/09/%E6%97%A5%E5%B8%B81/" title="日常1">日常1</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-06-09T00:20:56.000Z" title="发表于 2021-06-09 08:20:56">2021-06-09</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/DailyRecord/">DailyRecord</a></span></div><div class="content">对于昨天面试的一些感想昨天面试了两家公司，一年半没面试了，好像又回到了一年前面试的阶段，很紧张，词不达意，语无伦次。面完对自己的表现捶胸顿足，面试过程不堪回想，但是还是要顶着尴尬进行复盘，克服自己这种恐惧，拿出老子天下第一的气势
面试流程普遍流程就是 1.约时间 2.HR联系：有的hr会提前打电话进行基础情况的了解，我觉得这种是比较合理的，如果这一关都不合适就不用去公司面试了，大家都节约时间 3.填表：个人基础信息，应该是为了公司留档用的 4.面试：我最近碰到的都是只有一面，有的会和技术面试官一起面 5.结束
面试问题1. 自我介绍第一场我的自我介绍就很磕磕绊绊，第二场就稍微好一点，还在自己书面再整理一下，希望下次能更好我的自我介绍：我叫xxx，今年24岁，毕业两年，毕业就通过校招来到了xx城市，一直到现在。第一份工作是在xxx公司任职xxx，（想说但没说）【在xx公司我受益匪浅，完善的开发流程制度与技术文档让我在后面的工作中无论公司有没有要求我自己都会要求自己规范开发，文档留底】，遗憾的是始终不能适应公司文化，权衡之下选择离职。离职后进入第二家公司，任职前端开发工程师，使用的技术栈是 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/06/07/hexo%E5%8D%9A%E5%AE%A2%E6%BA%90%E7%A0%81%E6%8F%90%E4%BA%A4%E8%87%B3github/" title="hexo博客源码提交至github">     <img class="post_bg" src="/2021/06/07/hexo%E5%8D%9A%E5%AE%A2%E6%BA%90%E7%A0%81%E6%8F%90%E4%BA%A4%E8%87%B3github/hexo.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="hexo博客源码提交至github"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/06/07/hexo%E5%8D%9A%E5%AE%A2%E6%BA%90%E7%A0%81%E6%8F%90%E4%BA%A4%E8%87%B3github/" title="hexo博客源码提交至github">hexo博客源码提交至github</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-06-07T00:14:49.000Z" title="发表于 2021-06-07 08:14:49">2021-06-07</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/code/">code</a></span></div><div class="content">兴致勃勃打开家里电脑写博客，从github把博客文件下载下来整了半天发现没用，原来是之前配置的hexo deploy 只会把博客内容上传到github，源码并没有上传。原来如此！
博客源码提交到博客仓库的另一个分支进行管理博客设置成了github Page，源码经过查阅资料选择了用当前仓库的hexo分支进行保存管理，以后hexo分支为源码，master分支为hexo d生成的文件。
1.初始化文件夹（已进行初始化可忽略）1git init 

2.关联远程仓库1git remote add origin git@github.com:liujiaoy&#x2F;liujiaoy.github.io.git &#x2F;&#x2F;关联远程仓库

3.创建并切换分支1git switch -c hexo

4.将源码添加到仓库这里由于使用了主题，即包含了主题作者的仓库，添加时会出现问题需要子仓库排除在外再进行提交
1234git add .git rm themes&#x2F;butterflygit commit -m&quot;提交说明&quot;git push

5.此时即可通过 ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/05/24/%E5%8D%95%E4%B8%AA%E5%9F%9F%E5%90%8D%E4%B8%8E%E5%A4%9A%E4%B8%AAgithub-Page%E5%85%B3%E8%81%94/" title="单个域名与多个github Page关联">     <img class="post_bg" src="/2021/05/24/%E5%8D%95%E4%B8%AA%E5%9F%9F%E5%90%8D%E4%B8%8E%E5%A4%9A%E4%B8%AAgithub-Page%E5%85%B3%E8%81%94/01.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="单个域名与多个github Page关联"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/05/24/%E5%8D%95%E4%B8%AA%E5%9F%9F%E5%90%8D%E4%B8%8E%E5%A4%9A%E4%B8%AAgithub-Page%E5%85%B3%E8%81%94/" title="单个域名与多个github Page关联">单个域名与多个github Page关联</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-05-24T00:52:16.000Z" title="发表于 2021-05-24 08:52:16">2021-05-24</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/code/">code</a></span></div><div class="content">背景最近在准备简历，于是想把自己的项目都变为所有人可查看，知道可以通过github Pages实现，域名特定为username.gihub.io，之前已实现。但是放在gitHub上的项目有多个，我都想展示怎么实现？之前理解为只能有一个项目能使用githubPage，可是github Pages不可能真的只能展示一个项目吧，搜索了一下真的可以展示多个项目！果然我这种小垃圾遇到的问题，其他人早也遇到过并且解决了。
正确解读这边借用简书上别人文章的段落进行说明，原文链接

要发布用户站点，必须创建名为 &lt;user&gt;.github.io 的用户帐户所拥有的仓库。 要发布组织站点，必须创建名为 &lt;organization&gt;.github.io 的组织所拥有的仓库。除非您使用自定义域，否则用户和组织站点位于 http(s)://&lt;username&gt;.github.io 或 http(s)://&lt;organization&gt;.github.io。项目站点的源文件与其项目存储在同一个仓库中。除非您使用自定义域，否则项目站点位于 http(s)://&lt; ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/05/19/%E5%9F%9F%E5%90%8D%E5%85%B3%E8%81%94githubpage/" title="域名关联GitHub Page">     <img class="post_bg" src="/2021/05/19/%E5%9F%9F%E5%90%8D%E5%85%B3%E8%81%94githubpage/01.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="域名关联GitHub Page"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/05/19/%E5%9F%9F%E5%90%8D%E5%85%B3%E8%81%94githubpage/" title="域名关联GitHub Page">域名关联GitHub Page</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-05-19T02:40:33.000Z" title="发表于 2021-05-19 10:40:33">2021-05-19</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/code/">code</a></span></div><div class="content">背景github Pages提供了外界访问的入口，让自己的项目可以被别人看见，但是网址不简洁，我想拥有自己的网址。之前已经购买过域名并且根据别人的博客教程的顺利的和github page关联上了，但是我的域名没续费过期了，今天想起再买回来，顺带记录其中步骤。
购买域名1.简单点直接选阿里云，登录后（之前注册过，注册步骤省略）搜索域名即可，不然真不好找附图2.输入自己想要的域名加购购买…此处跟购物一样省略3.购买成功后可进入”管理我的域名”，请注意域名状态，可能会是审核中，审核完成后配置的域名解析才会生效  4.添加域名解析（重要）    使用新手引导将github page IP地址填进去就ok啦例如我的page地址为liujiaoy.Github.iowin+R cmd ping liujiaoy.Github.io之后可以得到IP地址  
github添加关联在github page项目中添加CNAME文件，文件中填入自己的域名
</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/03/31/vue-v-show%E7%8A%B6%E6%80%81%E5%80%BC%E6%94%B9%E5%8F%98%EF%BC%8C%E8%A7%86%E5%9B%BE%E6%9C%AA%E6%9B%B4%E6%96%B0/" title="vue v-show状态值改变，视图未更新">     <img class="post_bg" src="/images/%E5%86%AC%E9%9B%AA.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vue v-show状态值改变，视图未更新"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/03/31/vue-v-show%E7%8A%B6%E6%80%81%E5%80%BC%E6%94%B9%E5%8F%98%EF%BC%8C%E8%A7%86%E5%9B%BE%E6%9C%AA%E6%9B%B4%E6%96%B0/" title="vue v-show状态值改变，视图未更新">vue v-show状态值改变，视图未更新</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-03-31T07:46:24.000Z" title="发表于 2021-03-31 15:46:24">2021-03-31</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/code/">code</a></span></div><div class="content">vue列表存在父子关系，在点击父级子级想要呈现toggle模式时遇到困难</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/03/31/vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E7%94%A8iconfont/" title="vue项目中引用iconfont">     <img class="post_bg" src="/2021/03/31/vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E7%94%A8iconfont/01.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vue项目中引用iconfont"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/03/31/vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E7%94%A8iconfont/" title="vue项目中引用iconfont">vue项目中引用iconfont</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-03-31T07:46:24.000Z" title="发表于 2021-03-31 15:46:24">2021-03-31</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/code/">code</a></span></div><div class="content">在完善项目时发觉已经忘了怎么使用iconfont了，记录一下</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/">3</a><a class="extend next" rel="next" href="/page/3/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside_content" id="aside_content"><div class="card-widget card-info"><div class="card-content"><div class="card-info-avatar is-center"><img class="avatar-img" src="/null" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">憨憨一个</div><div class="author-info__description">憨憨的博客，应该会有知识点记录，也会有日常</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length_num">25</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length_num">16</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length_num">2</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/liujiaoy"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/liujiaoy" target="_blank" title="Github"><i class="fab fa-github"></i></a></div></div></div><div class="sticky_layout"><div class="card-widget card-announcement"><div class="card-content"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div></div><div class="card-widget card-recent-post"><div class="card-content"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2022/03/01/http%E9%82%A3%E7%82%B9%E4%BA%8B/" title="http那点事"><img src="/2022/03/01/http%E9%82%A3%E7%82%B9%E4%BA%8B/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="http那点事"/></a><div class="content"><a class="title" href="/2022/03/01/http%E9%82%A3%E7%82%B9%E4%BA%8B/" title="http那点事">http那点事</a><time datetime="2022-03-01T05:21:10.000Z" title="发表于 2022-03-01 13:21:10">2022-03-01</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/02/25/BFC%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E4%B9%88/" title="BFC到底是什么"><img src="/2022/02/25/BFC%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E4%B9%88/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="BFC到底是什么"/></a><div class="content"><a class="title" href="/2022/02/25/BFC%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E4%B9%88/" title="BFC到底是什么">BFC到底是什么</a><time datetime="2022-02-25T08:59:37.000Z" title="发表于 2022-02-25 16:59:37">2022-02-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/10/09/vue-vuecli4%E6%90%AD%E5%BB%BA%E6%96%B0%E9%A1%B9%E7%9B%AE%EF%BC%8C%E5%B9%B6%E5%BC%95%E5%85%A5element/" title="vue/vuecli4搭建新项目，并引入element"><img src="/2021/10/09/vue-vuecli4%E6%90%AD%E5%BB%BA%E6%96%B0%E9%A1%B9%E7%9B%AE%EF%BC%8C%E5%B9%B6%E5%BC%95%E5%85%A5element/topimg.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vue/vuecli4搭建新项目，并引入element"/></a><div class="content"><a class="title" href="/2021/10/09/vue-vuecli4%E6%90%AD%E5%BB%BA%E6%96%B0%E9%A1%B9%E7%9B%AE%EF%BC%8C%E5%B9%B6%E5%BC%95%E5%85%A5element/" title="vue/vuecli4搭建新项目，并引入element">vue/vuecli4搭建新项目，并引入element</a><time datetime="2021-10-09T05:13:05.000Z" title="发表于 2021-10-09 13:13:05">2021-10-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/09/03/%E9%9D%A2%E8%AF%95%E6%97%A5%E8%AE%B0/" title="面试日记"><img src="/2021/09/03/%E9%9D%A2%E8%AF%95%E6%97%A5%E8%AE%B0/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="面试日记"/></a><div class="content"><a class="title" href="/2021/09/03/%E9%9D%A2%E8%AF%95%E6%97%A5%E8%AE%B0/" title="面试日记">面试日记</a><time datetime="2021-09-03T11:07:19.000Z" title="发表于 2021-09-03 19:07:19">2021-09-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/09/02/vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" title="vue生命周期"><img src="/2021/09/02/vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/lifecycle.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vue生命周期"/></a><div class="content"><a class="title" href="/2021/09/02/vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" title="vue生命周期">vue生命周期</a><time datetime="2021-09-02T08:36:21.000Z" title="发表于 2021-09-02 16:36:21">2021-09-02</time></div></div></div></div></div><div class="card-widget card-categories"><div class="card-content"><div class="item-headline"><i class="fas fa-folder-open"></i><span>分类</span></div><ul class="card-category-list" id="aside-cat-list">
            <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/DailyRecord/"><span class="card-category-list-name">DailyRecord</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/code/"><span class="card-category-list-name">code</span><span class="card-category-list-count">19</span></a></li>
            
            </ul></div></div><div class="card-widget card-tags"><div class="card-content"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/CSS/" style="font-size: 1.23em; color: #999ea6">CSS</a> <a href="/tags/Git/" style="font-size: 1.37em; color: #99a4b2">Git</a> <a href="/tags/HTML/" style="font-size: 1.1em; color: #999">HTML</a> <a href="/tags/Hexo/" style="font-size: 1.23em; color: #999ea6">Hexo</a> <a href="/tags/JS/" style="font-size: 1.1em; color: #999">JS</a> <a href="/tags/MarkDown/" style="font-size: 1.1em; color: #999">MarkDown</a> <a href="/tags/VSCode/" style="font-size: 1.1em; color: #999">VSCode</a> <a href="/tags/element/" style="font-size: 1.1em; color: #999">element</a> <a href="/tags/hexo/" style="font-size: 1.1em; color: #999">hexo</a> <a href="/tags/http%E7%9B%B8%E5%85%B3/" style="font-size: 1.1em; color: #999">http相关</a> <a href="/tags/vue/" style="font-size: 1.5em; color: #99a9bf">vue</a> <a href="/tags/%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/" style="font-size: 1.23em; color: #999ea6">个人简历</a> <a href="/tags/%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8/" style="font-size: 1.1em; color: #999">插件使用</a> <a href="/tags/%E6%97%A5%E5%B8%B8/" style="font-size: 1.1em; color: #999">日常</a> <a href="/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" style="font-size: 1.23em; color: #999ea6">知识点</a> <a href="/tags/%E9%9D%A2%E8%AF%95/" style="font-size: 1.1em; color: #999">面试</a></div></div></div><div class="card-widget card-archives"><div class="card-content"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/03/"><span class="card-archive-list-date">三月 2022</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/02/"><span class="card-archive-list-date">二月 2022</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/10/"><span class="card-archive-list-date">十月 2021</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/09/"><span class="card-archive-list-date">九月 2021</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/08/"><span class="card-archive-list-date">八月 2021</span><span class="card-archive-list-count">9</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/06/"><span class="card-archive-list-date">六月 2021</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/05/"><span class="card-archive-list-date">五月 2021</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/03/"><span class="card-archive-list-date">三月 2021</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item more is-center"><a class="card-archive-list-link-more" href="/archives/">
              <span>查看更多</span><i class="fas fa-angle-right"  ></i></a></li></ul></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2022 By 憨憨一个</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><section id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></section><div class="search-dialog" id="local-search"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"><div id="local-hits"></div><div id="local-stats"><div class="local-search-stats__hr" id="hr"><span>由</span> <a target="_blank" rel="noopener" href="https://github.com/wzpan/hexo-generator-search" style="color:#49B1F5;">hexo-generator-search</a>
 <span>提供支持</span></div></div></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div><div><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="/js/search/local-search.js"></script><div class="js-pjax"><script>function subtitleType () {
  if (true) { 
    var typed = new Typed("#subtitle", {
      strings: "done is better than perfect,我思 故我在".split(","),
      startDelay: 300,
      typeSpeed: 150,
      loop: true,
      backSpeed: 50
    })
  } else {
    document.getElementById("subtitle").innerHTML = 'done is better than perfect'
  }
}

if (true) {
  if (typeof Typed === 'function') subtitleType()
  else $.getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js', subtitleType)
} else {
  subtitleType()
}</script><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script>(function(){
  const bp = document.createElement('script');
  const curProtocol = window.location.protocol.split(':')[0];
  if (curProtocol === 'https'){
  bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
  }
  else{
  bp.src = 'http://push.zhanzhang.baidu.com/push.js';
  }
  bp.dataset.pjax = ''
  const s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(bp, s);
})()</script></div></body></html>